<template>
	<view class="flex flex-dir-c" style="height: 100%;">
		<view style="position: absolute;">
			<u-navbar :is-back="false" title="" background="">
				<view class="slot-wrap flex flex-jc-c flex-ai-c">
					<u-icon name="arrow-left" color="#fff" size="32rpx" @click="navback" />
				</view>
			</u-navbar>
		</view>
		<!-- indicator-dots vertical -->
		<swiper class="swiper" style="" vertical :current="swiperCurrent" @change="swiperChange">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y>
					<view class="u-text-center">
						<view style="font-size: 50rpx;margin-top: 150rpx;">沙龙</view>
						<view class="font-24 mt-15">{{info.list.length ? info.current+1 : 0}}/{{info.list.length}}</view>
						<view style="padding-left: 113rpx;height: 824rpx;margin-top: 82rpx;position: relative;">
							<view style="width: 20rpx;position: absolute;left: 50rpx;top: 40%;" class="flex flex-dir-c">
								<view v-for="(item,i) in info.list.length" :key='i' class="swiper-imgs"
									:class="[i == info.current ? 'swiper-dot' : 'swiper-active']"></view>
							</view>
							<swiper class="swiper" :current="info.current" next-margin="95rpx" @change="changeSwiper">
								<swiper-item class="swiper-item" v-for="(item,i) in info.list" :key="i">
									<image class="scroll" style="width: 524rpx;" :src="item.activity_images.length ? item.activity_images[0]:item.image"></image>
								</swiper-item>
							</swiper>
					
						</view>
						<view class="detail flex flex-jc-c flex-ai-c" @click.stop="detail">
							<view style="margin-right: 10rpx;font-weight: 400;" class="font-22">了解详情</view>
							<i-icon icon="icon-right" size="20rpx" color="#fff" />
						</view>
					
						<view>
							<view class="mb_15">上滑探索往期回顾</view>
							<i-icon icon="icon-up" size="11rpx" />
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<view class="u-text-center">
					<view style="font-size: 50rpx;margin-top: 150rpx;">沙龙</view>
					<view class="font-24 mt-15">{{info.list2.length ? info.current2+1 : 0}}/{{info.list2.length}}</view>
					<scroll-view @scrolltolower="loadmore" style="height: 788rpx;margin-top: 80rpx;" scroll-y @touchmove.stop="">
						<view v-for="(item,i) in info.list2" :key="i" style="height: 394rpx;width: 100%;margin-bottom: 20rpx;">
							<image style="width: 100%;height: 100%;" :src="item.image"></image>
						</view>
						<u-loadmore margin-top="40" :load-text="info.loadText" color="#fff" :status="info.loadStatus" />
					</scroll-view>
		
					<view style="position: absolute;bottom: 120rpx;width: 100%;">
						<view class="mb_15">下滑探索更多沙龙</view>
						<i-icon icon="icon-lower" size="11rpx" />
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive, ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import me from '../../../api/me.js';
	import getLocation from '../../../utils/location.js';
	let swiperCurrent = ref(0)
	let info = reactive({
		current: 0,
		current2: 0,
		loadStatus: 'loadmore',
		loadText: {
			loadmore: '上拉加载更多',
			loading: '努力加载中',
			nomore: '实在没有了'
		},
		list: [],
		list2: [],
		page: 1
	})
	
	//沙龙活动列表（现在）
	const getActiviteList = async () => {
		let addr = uni.getStorageSync('address')
		const res = await me.getActiviteList({
			type: 1,
			city: addr.city || '',
			page: 1,
			size: 10
		})
		info.list = res.data
	}
	const moreStatus = (status: string) => {
		info.loadStatus = status
	}
	//沙龙活动列表（往期）
	const getActiviteListOld = async () => {
		let addr = uni.getStorageSync('address')
		const res = await me.getActiviteList({
			type: 2,
			city: addr.city || '',
			page: info.page,
			size: 10
		})
		info.list2 = [...info.list2,...res.data]
		if (res.data.length < 10) return moreStatus('nomore')
		if (res.data.total <= 10) {
			info.loadStatus = 'nomore'
		} else {
			moreStatus(res.data.length !== 0 ? 'loadmore' : 'nomore')
		}
		if (res.data.length === 0) return false
		info.page += 1 // 当前页加1
	}
	// 整体swiper
	const swiperChange = (i : any) => {
		if(i.detail.current){
			getActiviteListOld()
		}else {
			getActiviteList()
		}
		
	}
	// 活动图swiper
	const changeSwiper = (i : any) => {
		info.current = i.detail.current
	}
	const detail = () => {
		if(!info.list.length) return uni.showToast({
			title: '暂无活动',
			icon: 'none'
		})
		let item = info.list[info.current]
		uni.navigateTo({
			url: `/pages/common/salon/detail?id=${item.id}`
		})
	}
	const loadmore = () => {
		if(info.loadStatus == 'nomore') return
		getActiviteListOld()
	}
	const navback = () => {
		uni.navigateBack()
	}
	onLoad(() => {
		getLocation(false).then(() => {
			getActiviteList()
		}).catch(() => {
			getActiviteList()
		})
	})
</script>
<style>
	page {
		height: 100%;
		width: 750rpx;
		background: linear-gradient(180deg, #949494 0%, #010101 100%);
	}
</style>
<style lang="scss" scoped>
	:deep(.u-line) {
		display: none;
	}
	.swiper-imgs {
		width: 15rpx;
		height: 15rpx;
		margin-bottom: 23rpx;
		border-radius: 50%;
	}

	.swiper-active {
		border: 2rpx solid #9E9E9E !important;
		background: none !important;
	}

	.swiper-dot {
		background: #FFFFFF;

	}

	.detail {
		width: 264rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1rpx solid #FFFFFF;
		line-height: 80rpx;
		margin: 76rpx auto 112rpx auto;
	}

	.slot-wrap {
		width: 60rpx;
		height: 60rpx;
		background: rgba(119, 119, 119, 0.6);
		border-radius: 50%;
		margin-left: 13rpx;
	}

	.swiper-item {
		color: #fff;
	}
</style>